<template>
  <div class="addBankCard">
    <div class="content">

      <div :class="`bank_list`" v-for="(item, index) in myBankData.list" :key="index">
        <div :class="`bank_item flex ${index === 0 ? 'bank_used' : ''}`">
          <div class="bank-l-icon">
            <ImgT :src="`/imgs/bankIcon/bank_logo_${item.bank_id}.webp`" :alt="item?.bank_name" />
          </div>
          <div class="bank-l-name">
            <div class="info-text">
              <p>
                <span>{{ item.bank_name }}</span>
                <span>*******</span>
              </p>
              <p>{{ formatNumberString(item.account_number + '') }}</p>
            </div>
            <div class="utilization-bank">
              <div v-if="index === 0" class="btn-bank">
                {{ t('paymentManagement_page_default_bank') }}
              </div>
              <template v-else>
                <div @click="bankCheck(item, 'del')" class="btn-bank btn-bank-use">
                  {{ t('paymentManagement_page_delete') }}
                </div>
                <div @click="bankCheck(item, 'default')" class="btn-bank btn-bank-default">
                  {{ t('paymentManagement_page_set_default') }}
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>

      <div v-if="!(bankList.length >= 6)">
        <div class="bank_list_add" v-show="!addBankFlag">
          <div class="center" @click="flagBank(true)">
            <ImgT src="/imgs/payment/add_icon.webp" alt="nodata" />
            <span>{{ t('paymentManagement_page_new_bank') }}</span>
          </div>
        </div>


      </div>

      <div class="tip" v-show="!addBankFlag">
        <p>
          <span><iconpark-icon name="tongyiconhonsts02"></iconpark-icon></span>
          <span>{{ t('paymentManagement_page_max_bank', { num: bankList?.length || 0 }) }}</span>
        </p>
      </div>


      <div class="form">
        <nut-form ref="formRef" label-position="top" v-show="addBankFlag" class=" bank-add-form" :model-value="form">
          <div class="add-bank-text">
            <p>{{ t('paymentManagement_page_add_one_bank') }}</p>
            <ImgT src="/imgs/wallet/addBankClose.webp" alt="nodata" @click="flagBank(false)" />
          </div>

          <nut-form-item :label="t('addBank_page_pChooseBank')">
            <div class="choose_bank flex">
              <div class="choose_bank_l flex">
                <span class="bank_cicon" v-if="chooseBank.value">
                  <ImgT :src="`/imgs/bankIcon/bank_logo_${chooseBank.value}.webp`" :alt="chooseBank.label" />
                </span>
                <span class="bank_cname"> {{ chooseBank.label }} </span>
              </div>
              <nut-button :bordered="false" block class="change_btn  weight_5 center pointer" @click="showChangeBank">{{
                t('withdraw_page_newAdd') }}
              </nut-button>
            </div>
          </nut-form-item>

          <nut-form-item :label="t('addBank_page_bankCard')" path="bankCode">
            <nut-input size="large" @input="validateInput" v-model="form.bankCode"
              :placeholder="t('paymentManagement_page_chCardNo')">
              <template #suffix>
                <span class="refresh_icon"></span>
              </template>
            </nut-input>
          </nut-form-item>


          <nut-form-item :label="t('addBank_page_name')" path="accountName">
            <nut-input size="large" :disabled="!!cardholder_name" v-model="form.accountName"
              :placeholder="t('paymentManagement_page_enterBank')">
              <template #suffix>
                <span class="refresh_icon"></span>
              </template>
            </nut-input>
          </nut-form-item>


          <nut-button :bordered="false" block class="change_btn  weight_5 center pointer" @click="submit">
            {{ t('paymentManagement_page_confirm') }}
          </nut-button>
        </nut-form>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">

import { onMounted, onUnmounted, ref, watch } from "vue";
import { showToast } from "@nutui/nutui";
import { Net } from "@/net/Net";
import { NetPacket } from "@/netBase/NetPacket";
import { useI18n } from "vue-i18n";
import { MessageEvent2 } from "@/net/MessageEvent2";
import { NetMsgType } from "@/netBase/NetMsgType";
import { testBankCard } from "@/utils/validateTools.ts";

const { t } = useI18n();


const props = defineProps<{
  myBankData: any
  bankListData: any
}>()

const emit = defineEmits<{
  openChooseBank: any
  addBankCardVisible: [any, string]
  updateMyBankList: any
}>()

onMounted(() => {
  if (props.myBankData.cardholder_name) {
    cardholder_name.value = props.myBankData.cardholder_name
    form.value.accountName = cardholder_name.value
  }


})

const cardholder_name = ref('')
const bankList = ref<any>([])

watch(
  () => props.bankListData,
  (count: any) => {
    chooseBank.value = count
    form.value.bank = count.value
    form.value.bankName = count.label

  })

watch(
  () => props.myBankData.cardholder_name,
  (count: string) => {
    cardholder_name.value = count
    form.value.accountName = count
  })


const form = ref({
  bank: '',
  bankCode: '',
  bankName: '',
  accountName: '',
})

const chooseBank = ref({ label: '', value: '' }); // 选择的银行卡

// 限制只能输入输入数字
const validateInput = () => {
  form.value.bankCode = form.value.bankCode.replace(/[^0-9]/g, '');
}
const submit = () => {
  if (!form.value.bank) { return showToast.fail(t('paymentManagement_page_chBank')) }

  if (!form.value.bankCode) {
    return showToast.fail(t('paymentManagement_page_chCardNo'))
  }
  if (!testBankCard(form.value.bankCode)) {
    return showToast.fail(t('paymentManagement_page_tip1'))
  }
  if (!form.value.accountName) {
    return showToast.fail(t('paymentManagement_page_enterBank'))
  }
  const req = NetPacket.req_new_bank_card_info();
  req.bank_id = form.value.bank;
  req.account_number = form.value.bankCode;
  req.cardholder_name = props.myBankData.cardholder_name ? props.myBankData.cardholder_name : form.value.accountName?.replace(/\s+/g, '').toUpperCase(); // 保存需要去除空格和转大写
  Net.instance.sendRequest(req);
}

// result: 2 // 1 成功，2 失败
const handleAddBank = (res: any) => {
  const tips: any = {
    1: 'paymentManagement_page_addBankSuc',
    2: 'paymentManagement_page_addBankFail',
    3: 'paymentManagement_page_acc_already',
  }
  if (res.result === 1) {
    emit('updateMyBankList')
    flagBank(false)
    showToast.success(t(tips[res.result]));
  } else {
    showToast.fail(t(tips[res.result]));
  }
};


const showChangeBank = () => {
  emit('openChooseBank')
}

const bankCheck = (item: any, type: string) => {
  emit('addBankCardVisible', item, type)
};


const addBankFlag = ref<Boolean>(false)
const flagBank = (flag: Boolean) => {
  addBankFlag.value = flag
};

onMounted(() => {
  // 绑定银行卡
  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_req_new_bank_card_info, handleAddBank);

})


onUnmounted(() => {

  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_req_new_bank_card_info, null);

});


// 字符串判断
const formatNumberString = (input: string): string => {
  if (input.length <= 7) {
    return input.replace(/./g, "***");
  }
  return input.substr(0, 3) + "**** ****" + input.substr(-4);
};
</script>

<style scoped lang="scss">
@import "../form.scss";

.flex {
  display: flex;
}

.addBankCard {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #100E26;
  border: 1px solid #2E296B;
  border-radius: 8px 8px 0 0;

  .content {
    padding-bottom: 20px;

    .bank_list {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 15px 30px;
      overflow-y: auto;

      .bank_item {
        justify-content: start;
        align-items: center;
        cursor: pointer;
        font-size: 14px;
        width: 100%;
        height: 76px;
        padding: 14px 12px;
        border: 2px solid #4e3b99;
        border-radius: 6px;
        //background: #3a2786;
        background: url(/imgs/payment/mockBank.webp) center no-repeat;
        background-size: 100%;
        flex-flow: nowrap !important;

        &.bank_used {
          border-color: #0cc41e;
        }

        .bank-l-icon {
          display: flex;
          align-items: center;
          margin-left: 4px;
          width: 48px;
          height: 48px;
          border-radius: 50%;
          padding: 12px 6px 13px;
          border: solid 3px #d6cdff;
          background-color: #fff;

          img {
            max-width: 45px;
          }
        }

        .bank-l-name {
          margin-left: 35px;
          flex: 1;
          display: flex;
          justify-content: space-between;
          width: 100%;

          .utilization-bank {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-around;

            .btn-bank {
              width: 66px;
              height: 20px;
              line-height: 22px;
              text-align: center;
              border: none !important;
              font-size: 12px;
              color: rgba(192, 194, 219, 1);
              border-radius: 15px;
              background-color: #211051;

            }

            .btn-bank-use {
              color: rgba(255, 255, 255, 1);
              background-color: rgba(12, 196, 30, 1);
            }

            .btn-bank-default {
              color: rgba(255, 255, 255, 1);
              background-color: rgba(19, 130, 231, 1);
            }

            .btn-bank:nth-child(2) {
              margin-top: 10px;
            }
          }

          .info-text {
            color: #fff;

            p {
              white-space: nowrap;
              font-size: 12px;
              margin-right: 10px;
            }

            p:nth-child(1) {
              span:nth-child(2) {
                margin-left: 10px;

              }
            }

            p:nth-child(2) {
              margin-top: 12px;
              text-align: right;
              font-size: 16px;
              font-weight: 600;
            }
          }

          //max-width: 120px;
        }

        //.bank-l-name {
        //  padding-right: 18px;
        //  display: flex;
        //  align-items: center;
        //  justify-content: space-between;
        //  flex: 1;
        //  margin-left: 37px;
        //
        //}
      }
    }

    .bank_list_add {
      cursor: pointer;
      font-size: 14px;
      height: 76px;
      background: #1D1C3C;
      border: 1px solid #333260;
      border-radius: 6px;

      .center {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        img {
          width: 30px;
          height: 30px;
        }

        span {
          margin-top: 5px;
          color: #fff;
        }
      }
    }

    .tip {
      padding: 0 20px;
      margin-top: 14px;

      span {
        color: #A8A8CA;
        font-size: 11px;
      }

      span:nth-of-type(2) {
        margin-left: 6px;
      }
    }
  }

  .form {
    padding: 0 10px;
    background-image: radial-gradient(circle at 50% 11%, #361e79, #202137 97%);

    .bank-add-form {
      padding: 14px 20px;
      background-color: #130931;
      border-radius: 10px;

      .add-bank-text {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        font-weight: normal;
        margin-bottom: 14px;
        color: #fff;

        img {
          cursor: pointer;
        }
      }

      .choose_bank {
        flex-flow: nowrap !important;
        gap: 10px !important;

        .choose_bank_l {
          align-items: center;
          width: 195px;
          height: 39px;
          background: url(/imgs/payment/inputBg.webp) center no-repeat;
          background-size: 100%;

          .bank_cicon {
            width: 28px;
            height: 28px;
            margin-left: 8px;
            margin-right: 6px;
            border-radius: 50%;
            background: #fff;
            border: solid 1.5px #d6cdff;

            img {
              width: 26px;
              height: 26px;
              border-radius: 50%;
            }
          }

          .bank_cname {
            width: 220px;
            line-height: 16px;
          }
        }

        .change_btn {

          width: 110px;
          height: 38px;
        }
      }
    }
  }

  .change_btn {
    display: inline-block;
    text-align: center;
    color: #fff;
    background: url(/imgs/payment/go-btn.webp) 80% 85% no-repeat;
    background-size: 100%;
    padding: 0;
    border: 0;
    line-height: 39px;
  }
}
</style>
